<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="title">个人中心</view>
        </view>

        <view class="content">
            <!-- 未登录状态 -->
            <view class="login-section" v-if="!isLoggedIn">
                <view class="default-avatar-container">
                    <text class="default-avatar-text">👤</text>
                </view>
                <text class="login-tip">登录体验更多功能</text>
                <button class="login-btn" @click="showLoginForm">立即登录</button>
            </view>

            <!-- 已登录状态 -->
            <view class="profile-section" v-else>
                <view class="avatar-container" @click="changeAvatar">
                    <image :src="userInfo.avatar" class="avatar"></image>
                    <view class="edit-badge">
                        <text class="edit-icon">✎</text>
                    </view>
                </view>
                <text class="username">{{userInfo.username}}</text>
                <view class="edit-name" @click="showEditNameForm">
                    <text class="edit-name-text">修改昵称</text>
                </view>
            </view>


            <!-- 我的喜欢列表 -->
            <view class="song-section" v-if="isLoggedIn">
                <view class="section-header">
                    <text class="section-title">♥ 我的喜欢</text>
                    <text class="section-count">{{likedSongs.length}}首</text>
                </view>
                <view class="song-list" v-if="likedSongs.length > 0">
                    <view class="song-item" 
                          v-for="(song, index) in likedSongs" 
                          :key="song.id"
                          @click="playSong(song)">
                        <image :src="song.cover_url || song.image || '/static/logo.png'" 
                               class="song-image"></image>
                        <view class="song-info">
                            <text class="song-title">{{song.title}}</text>
                            <text class="song-artist">{{song.artist}}</text>
                        </view>
                    </view>
                </view>
                <view class="empty-tip" v-else>
                    <text>还没有喜欢的歌曲</text>
                </view>
            </view>

            <!-- 我的收藏列表 -->
            <view class="song-section" v-if="isLoggedIn">
                <view class="section-header">
                    <text class="section-title">★ 我的收藏</text>
                    <text class="section-count">{{collectedSongs.length}}首</text>
                </view>
                <view class="song-list" v-if="collectedSongs.length > 0">
                    <view class="song-item" 
                          v-for="(song, index) in collectedSongs" 
                          :key="song.id"
                          @click="playSong(song)">
                        <image :src="song.cover_url || song.image || '/static/logo.png'" 
                               class="song-image"></image>
                        <view class="song-info">
                            <text class="song-title">{{song.title}}</text>
                            <text class="song-artist">{{song.artist}}</text>
                        </view>
                    </view>
                </view>
                <view class="empty-tip" v-else>
                    <text>还没有收藏的歌曲</text>
                </view>
            </view>

            <!-- 功能列表 -->
            <view class="feature-list">
                <view class="feature-item" @click="navigateToSettings">
                    <text class="feature-icon">⚙</text>
                    <text class="feature-title">设置</text>
                    <text class="feature-arrow">›</text>
                </view>
            </view>

            <!-- 退出登录按钮 -->
            <view class="logout-section" v-if="isLoggedIn">
                <button class="logout-btn" @click="logout">退出登录</button>
            </view>
        </view>

        <!-- 登录表单弹窗 -->
        <view class="modal" v-if="showLogin">
            <view class="modal-content">
                <view class="modal-header">
                    <text class="modal-title">用户登录</text>
                    <text class="modal-close" @click="closeLoginForm">×</text>
                </view>
                <view class="modal-body">
                    <input class="input" type="text" v-model="loginForm.username" placeholder="用户名" />
                    <input class="input" type="password" v-model="loginForm.password" placeholder="密码" />
                </view>
                <view class="modal-footer">
                    <button class="cancel-btn" @click="closeLoginForm">取消</button>
                    <button class="confirm-btn" @click="login">登录</button>
                </view>
            </view>
        </view>

        <!-- 修改昵称弹窗 -->
        <view class="modal" v-if="showEditName">
            <view class="modal-content">
                <view class="modal-header">
                    <text class="modal-title">修改昵称</text>
                    <text class="modal-close" @click="closeEditNameForm">×</text>
                </view>
                <view class="modal-body">
                    <input class="input" type="text" v-model="editNameForm.newName" placeholder="请输入新昵称" />
                </view>
                <view class="modal-footer">
                    <button class="cancel-btn" @click="closeEditNameForm">取消</button>
                    <button class="confirm-btn" @click="updateUsername">确认</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isLoggedIn: false,
            userInfo: {
                username: '用户名',
                avatar: '/static/logo.png'
            },
            likedSongs: [],
            collectedSongs: [],
            showLogin: false,
            loginForm: {
                username: '',
                password: ''
            },
            showEditName: false,
            editNameForm: {
                newName: ''
            }
        }
    },
    onLoad() {
        // 检查是否已登录
        this.checkLoginStatus();
        // 加载歌曲列表
        this.loadSongs();
    },
    onShow() {
        // 每次显示页面时重新加载
        this.loadSongs();
    },
    methods: {
        
        // 检查登录状态
        checkLoginStatus() {
            const userInfo = uni.getStorageSync('userInfo');
            if (userInfo) {
                this.isLoggedIn = true;
                this.userInfo = JSON.parse(userInfo);
            }
        },
        
        
        // 加载歌曲列表
        loadSongs() {
            this.likedSongs = uni.getStorageSync('likedSongs') || [];
            this.collectedSongs = uni.getStorageSync('collectedSongs') || [];
        },
        
        // 播放歌曲
        playSong(song) {
            // 跳转到首页并播放歌曲
            uni.switchTab({
                url: '/pages/index/index'
            });
        },
        
        // 显示登录表单
        showLoginForm() {
            this.showLogin = true;
        },
        
        // 关闭登录表单
        closeLoginForm() {
            this.showLogin = false;
            this.loginForm = {
                username: '',
                password: ''
            };
        },
        
        // 登录操作
        login() {
            if (!this.loginForm.username || !this.loginForm.password) {
                uni.showToast({
                    title: '请输入用户名和密码',
                    icon: 'none'
                });
                return;
            }
            
            // 模拟登录成功
            const userInfo = {
                username: this.loginForm.username,
                avatar: '/static/logo.png',
                userId: 'user_' + Math.floor(Math.random() * 1000)
            };
            
            // 保存用户信息
            uni.setStorageSync('userInfo', JSON.stringify(userInfo));
            
            this.isLoggedIn = true;
            this.userInfo = userInfo;
            this.closeLoginForm();
            this.loadSongs();
            
            uni.showToast({
                title: '登录成功',
                icon: 'success'
            });
        },
        
        // 退出登录
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.removeStorageSync('userInfo');
                        this.isLoggedIn = false;
                        this.userInfo = {
                            username: '用户名',
                            avatar: '/static/logo.png'
                        };
                        
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'success'
                        });
                    }
                }
            });
        },
        
        // 更换头像
        changeAvatar() {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    const tempFilePath = res.tempFilePaths[0];
                    
                    // 更新头像
                    this.userInfo.avatar = tempFilePath;
                    
                    // 保存更新后的用户信息
                    uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
                    
                    uni.showToast({
                        title: '头像已更新',
                        icon: 'success'
                    });
                }
            });
        },
        
        // 显示修改昵称表单
        showEditNameForm() {
            this.editNameForm.newName = this.userInfo.username;
            this.showEditName = true;
        },
        
        // 关闭修改昵称表单
        closeEditNameForm() {
            this.showEditName = false;
        },
        
        // 更新用户名
        updateUsername() {
            if (!this.editNameForm.newName) {
                uni.showToast({
                    title: '昵称不能为空',
                    icon: 'none'
                });
                return;
            }
            
            // 更新用户名
            this.userInfo.username = this.editNameForm.newName;
            
            // 保存更新后的用户信息
            uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
            
            this.closeEditNameForm();
            
            uni.showToast({
                title: '昵称已更新',
                icon: 'success'
            });
        },
        
        // 导航到设置页面
        navigateToSettings() {
            uni.showToast({
                title: '设置功能开发中',
                icon: 'none'
            });
        }
    }
}
</script>

<style>
.container {
    background: linear-gradient(180deg, #e8eaf6 0%, #f3e5f5 50%, #fce4ec 100%);
    min-height: 100vh;
}

/* 顶部导航栏 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 50;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
}

.back {
    font-size: 40rpx;
    margin-right: 20rpx;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 2rpx;
}

.content {
    margin-top: 100rpx;
    padding: 30rpx;
}

/* 登录区域 */
.login-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
}

.default-avatar-container {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    margin-bottom: 30rpx;
    background-color: #7C4DFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.default-avatar-text {
    font-size: 80rpx;
    color: #ffffff;
}

.login-tip {
    font-size: 28rpx;
    color: #888888;
    margin-bottom: 30rpx;
}

.login-btn {
    background-color: #7C4DFF;
    color: #ffffff;
    font-size: 28rpx;
    padding: 15rpx 60rpx;
    border-radius: 50rpx;
    border: none;
}

/* 个人资料区域 */
.profile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 24rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.avatar-container {
    position: relative;
    margin-bottom: 30rpx;
}

.avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    border: 4rpx solid #ffffff;
    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
}

.edit-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50rpx;
    height: 50rpx;
    background-color: #7C4DFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit-icon {
    color: #ffffff;
    font-size: 24rpx;
}

.username {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 15rpx;
    color: #2c3e50;
}

.edit-name {
    padding: 10rpx 30rpx;
    background-color: #f0f0f0;
    border-radius: 30rpx;
}

.edit-name-text {
    font-size: 24rpx;
    color: #666666;
}


/* 歌曲区域 */
.song-section {
    background: #ffffff;
    border-radius: 24rpx;
    margin-bottom: 30rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #2c3e50;
}

.section-count {
    font-size: 24rpx;
    color: #888888;
}

.song-list {
    display: flex;
    flex-direction: column;
}

.song-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fe 100%);
    border-radius: 16rpx;
    margin-bottom: 12rpx;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.08);
}

.song-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.song-item:last-child {
    margin-bottom: 0;
}

.song-item:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.2);
}

.song-item:active::before {
    opacity: 1;
}

.song-image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 16rpx;
    margin-right: 20rpx;
    object-fit: cover;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.song-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.song-title {
    font-size: 28rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 6rpx;
    color: #2c3e50;
}

.song-artist {
    font-size: 24rpx;
    color: #95a5a6;
    display: block;
}

.empty-tip {
    text-align: center;
    padding: 40rpx 0;
    color: #999999;
    font-size: 26rpx;
}

/* 功能列表 */
.feature-list {
    background: #ffffff;
    border-radius: 24rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.feature-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    transition: all 0.3s ease;
}

.feature-item:active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.feature-icon {
    font-size: 40rpx;
    margin-right: 20rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-title {
    flex: 1;
    font-size: 28rpx;
}

.feature-arrow {
    font-size: 36rpx;
    color: #cccccc;
}

/* 退出登录按钮 */
.logout-section {
    margin-top: 60rpx;
}

.logout-btn {
    background: #ffffff;
    color: #ff4d4f;
    font-size: 28rpx;
    padding: 20rpx 0;
    border-radius: 24rpx;
    border: none;
    box-shadow: 0 4rpx 20rpx rgba(255, 77, 79, 0.15);
    transition: all 0.3s ease;
}

.logout-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 12rpx rgba(255, 77, 79, 0.2);
}

/* 弹窗样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal-content {
    width: 80%;
    background-color: #ffffff;
    border-radius: 16rpx;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
    font-size: 32rpx;
    font-weight: bold;
}

.modal-close {
    font-size: 40rpx;
    color: #888888;
}

.modal-body {
    padding: 30rpx;
}

.input {
    width: 100%;
    height: 80rpx;
    border: 1rpx solid #eeeeee;
    border-radius: 8rpx;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
}

.modal-footer {
    display: flex;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #f0f0f0;
}

.cancel-btn, .confirm-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 8rpx;
    font-size: 28rpx;
}

.cancel-btn {
    background-color: #f0f0f0;
    color: #666666;
    margin-right: 20rpx;
}

.confirm-btn {
    background-color: #7C4DFF;
    color: #ffffff;
}
</style>
